<template>
  	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="page-container">
    <view class="particle-container">
      <!-- 粒子容器 -->
      <view class="particles-wrapper">
        <view class="particle p1"></view>
        <view class="particle p2"></view>
        <view class="particle p3"></view>
        <view class="particle p4"></view>
        <view class="particle p5"></view>
        <view class="particle p6"></view>
        <view class="particle p7"></view>
        <view class="particle p8"></view>
        <view class="particle p9"></view>
        <view class="particle p10"></view>
        <view class="particle p11"></view>
        <view class="particle p12"></view>
        <view class="particle p13"></view>
        <view class="particle p14"></view>
        <view class="particle p15"></view>
      </view>

      <!-- 内容区域 -->
      <view class="header-content">
        <view class="header-title">
          <text>小锚助手</text>
        </view>
        <view class="header-subtitle">
          <text>您的健康管家</text>
        </view>
      </view>
    </view>
    <view class="set-view">
      <view class="grid-menu-container">
        <view class="grid-menu">
          <view class="item" v-for="(item, index) in menuList" :key="index" @click="navigationUrl({
			  name:item.pathName,
			  params:{
				  id:'',
          name:item.name
			  }
		  })">
            <view class="icon-item">
              <text :class="['menu-icon iconfont', item.icon]"></text>
            </view>
            <view class="text-item">
              <text class="text text11">{{ item.title }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>


        <!-- 第三行及以下：订单列表 -->
    <view class="order-list">
      <view class="row-title">
      <text class="title-text text11">自己服务工单</text>
      </view>
      <!-- 订单卡片项 -->
       <orderItems :orderList="orderList" type="read"/>
      
    </view>

  </view>
  <TabComponent :tabs="currentTabs" @change="onTabChange" />

</template>

<script setup>
// 静态组件，无额外逻辑
	import gridMenu from "@/components/grid-menu/index" 
  import orderItems from "@/components/orderItems/index"
  import { onShow } from '@dcloudio/uni-app';
  

import {
  ref,
  onMounted,
  computed,
  nextTick
} from 'vue';
import {
  useRouter
} from 'uni-mini-router'

import {
  useFontSizeStore
} from '@/stores/fontSizeStore';
import {
  useTabStore
} from '@/stores/tabs'
import {
  ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'
import { familyItemsApi } from "@/api/familyMembers"

	import { useShare } from '@/utils/useShare';
  import {getAppEnum} from "@/utils/appDataEnum"
		
		// 配置分享内容
		const { onShareAppMessage, onShareTimeline } = useShare({
		  title: '欢迎',
		  path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
		  imageUrl: '/static/share-cover.jpg',
		  query: '' // 朋友圈参数（可选）
		});
		
		
const fontSizeStore = useFontSizeStore();
 
const router = useRouter();

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
  const role = getApp()[getAppEnum.CurrentRole];
  return ROLE_TABS[role]?.tabs
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
  nextTick(() => {
    router.pushTab({
      name: tab.key
    })
  })
}

 
// 菜单数据
const menuList = ref([
  { title: '生活照料', icon: 'icon-a-shenghuozhaoliaoyi',pathName:"family_lifeCare"},
  { title: '家', icon: 'icon-home-heart-line',pathName:"family_elderList" },
  { title: '健康管家', icon: 'icon-wode-woshifuwushang',pathName:"family_healthManager" },
  { title: '智慧设备', icon: 'icon-shebei3',pathName:"family_deviceList",name:"" },
  { title: '健康预约', icon: 'icon-yuyuedan',pathName:"family_healthAppointment" },
  { title: '工单服务', icon: 'icon-fuwujilu3',pathName:"common_family_serviceList" }
]);


// mock 数据：包含“长辈工单”和“自己工单”
const orderList = ref([]);

onMounted(() => {
    
  familyItemsApi({
    id: ""
  }).then((res) => {
    console.log("Res:", res);
    orderList.value = res.data;
  })
})

const navigationUrl=(item)=>{

  router.push({
    name:item.name,
    params:item.params
  })
}

// 根据状态获取样式类名
const getStatusClass = (status) => {
  const classMap = {
    pending: 'status-pending',
    confirmed: 'status-confirmed',
    processing: 'status-processing',
    completed: 'status-completed'
  };
  return classMap[status] || '';
};

</script>

<style lang="less" scoped>
@import '@/static/styles/volunteer/home/index.less';

// 订单列表样式
  .order-list {
    padding: 30rpx;
    display: flex;
    flex-direction: column;

    .row-title{
      display: flex;
      justify-content: start;
      margin-bottom: 30rpx;
      .title-text{
        font-weight: 500;
      }
    }

    // 订单卡片
    .order-card {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 20rpx;
      border: 1rpx solid #efefef;
      margin-bottom: 20rpx;

      // 订单行通用样式
      .order-row {
        display: flex;
        width: 100%;
        margin-bottom: 16rpx;
        align-items: center;

        &:last-child {
          margin-bottom: 0;
        }

        // 第一行：订单号和订单状态
        &.row1 {
          justify-content: space-between;
          padding-bottom: 16rpx;
          border-bottom: 1px solid #f5f5f5;

          .order-no {
            font-size: 26rpx;
            color: #333;
            // font-weight: 500;
          }
        }

        // 第二行：图片、服务信息和金额
        &.row2 {
          align-items: center;
          gap: 16rpx;
          padding: 10rpx 0;

          .product-image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 8rpx;
            overflow: hidden;
            background-color: #f5f5f5;
            flex-shrink: 0;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .product-info {
            flex: 1;
            min-width: 0;

            .service-name {
              font-size: 26rpx;
              color: #333;
              font-weight: 500;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              margin-bottom: 6rpx;
            }

            .product-model {
              font-size: 22rpx;
              color: #666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }

          .order-amount {
            flex-shrink: 0;
            text-align: right;
            min-width: 120rpx;

            .amount-label {
              font-size: 22rpx;
              color: #666;
              display: block;
            }

            .amount-value {
              font-size: 26rpx;
              color: #f5222d;
              font-weight: 600;
            }
          }
        }

        // 第三行：支付状态、订单时间和详情按钮
        &.row3 {
          justify-content: space-between;
          padding-top: 16rpx;
          border-top: 1px solid #f5f5f5;

          .order-time {
            font-size: 22rpx;
            color: #666;
            margin: 0 10rpx;
            flex: 1;
            text-align: left;
          }

          .detail-btn {
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 8rpx;
            padding: 8rpx 20rpx;
            font-size: 24rpx;
            height: auto;
            line-height: 1;
            white-space: nowrap;
          }
        }
      }
    }

    // 空状态样式
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 150rpx 0;

      .empty-icon {
        font-size: 80rpx;
        margin-bottom: 30rpx;
        color: #ddd;
      }

      .empty-text {
        font-size: 28rpx;
        color: #999;
      }
    }

    // 加载状态样式
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 150rpx 0;

      .spinner {
        width: 50rpx;
        height: 50rpx;
        border: 5rpx solid #eee;
        border-top-color: #1890ff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20rpx;
      }

      text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
</style>